<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。
		尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。

		为了解决这个问题，Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop。
		你是否还记得修饰符是点号打头的指令后缀？
		
		<!-- 阻止单击事件冒泡 -->
		<a v-on:click.stop="doThis"></a>
		
		<!-- 提交事件不再重载页面 -->
		<form v-on:submit.prevent="onSubmit"></form>
		
		<!-- 修饰符可以串联 -->
		<a v-on:click.stop.prevent="doThat">
		
		<!-- 只有修饰符 -->
		<form v-on:submit.prevent></form>
		1.0.16 添加了两个额外的修饰符：
		
		<!-- 添加事件侦听器时使用 capture 模式 -->
		<div v-on:click.capture="doThis">...</div>
		
		<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
		<div v-on:click.self="doThat">...</div>
	</body>
</html>
